<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <label class="el-form-item-label">周</label>
      <span>
        <el-date-picker
          class="filter-item"
          v-model="query.beginDate"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周"
@change="changeDate"
>
        </el-date-picker>
      </span>
      <!-- <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="doList">搜索</el-button>  -->
      <el-button type="defalut" icon="el-icon-download" :loading="downloadLoading"  @click="doExport" style="float: right;">导出</el-button>

    </div>
    <!--表格渲染-->
    <div
      data-v-eba2317e=""
      class="el-table el-table--fit el-table--border el-table--group el-table--enable-row-hover el-table--enable-row-transition el-table--small"
      style="width: 100%"
    >
      <div class="el-table__header-wrapper">
        <table
          cellspacing="0"
          cellpadding="0"
          border="0"
          class="el-table__header"
          width="100%"
        >
          <colgroup>
            <col name="el-table_14_column_109" width="108" >
            <col name="el-table_14_column_110" width="88" >
            <col
              name="el-table_14_column_111_column_112_column_113"
            >
            <col
              name="el-table_14_column_111_column_112_column_114"
              width="88"
            > 
            <col
              name="el-table_14_column_111_column_112_column_114"
              width="88"
            > 
          </colgroup>
          <thead class="is-group has-gutter">
            <tr class="">
              <th class="el-table_14_column_109 is-leaf el-table__cell"> <div class="cell">督查人员</div> </th>
              <th class="el-table_14_column_110 is-leaf el-table__cell"> <div class="cell">日期</div> </th>
              <th class="el-table_14_column_110 is-leaf el-table__cell"> <div class="cell">督查点位及发现的问题</div> </th>
              <th class="el-table_14_column_110 is-leaf el-table__cell"> <div class="cell">问题数（照片数）</div> </th>
              <th class="el-table_14_column_110 is-leaf el-table__cell"> <div class="cell">静态问题数</div> </th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="el-table__body-wrapper is-scrolling-none">
        <table
          cellspacing="0"
          cellpadding="0"
          border="0"
          class="el-table__body"
          width="100%"
        >
          <colgroup>
            <col name="el-table_14_column_109" width="108" >
            <col name="el-table_14_column_110" width="88" >
            <col
              name="el-table_14_column_111_column_112_column_113"
            >
            <col
              name="el-table_14_column_111_column_112_column_114"
              width="88"
            > 
            <col
              name="el-table_14_column_111_column_112_column_114"
              width="88"
            > 
          </colgroup>
          <tbody>
            <tr v-for="(item,index) in list" class="el-table__row" :key="index">

              <td
                v-if="item.merge"
                :rowspan="item.merge"
                colspan="1"
                class="el-table_14_column_109 el-table__cell"
              >
                <div class="cell "><div>{{ item.name }}</div></div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_110 el-table__cell"
              >
                <div class="cell ">{{ item.date }}</div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_113 el-table__cell"
              >
                <div class="cell " :title="item.problem"><pre>{{ item.problem }}</pre></div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_114 el-table__cell"
              >
                <div class="cell ">{{ item.num }}</div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_114 el-table__cell"
              >
                <div class="cell ">{{ item.staticNum }}</div>
              </td>
            </tr>
            <!-- <tr class="el-table__row">
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_110 el-table__cell"
              >
                <div class="cell " >周二</div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_113 el-table__cell"
              >
                <div class="cell " >市第十期问题回访:恒茂小区问题未整改，垃圾桶未见分类标识:飞线充电:违规晾晒:公共设施损坏。
                  丰和都会小区问题回访、公共设施损坏问题非常普遍;楼道杂物堆积严重;破损鲜奶箱成污点垃圾广告乱张贴。
                  该问题经多次督办，市暗访也拍了多次，问题匀未整改到位，成老大难问题，</div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_114 el-table__cell"
              >
                <div class="cell " >24</div>
              </td>
            </tr>
            <tr class="el-table__row">
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_110 el-table__cell"
              >
                <div class="cell " >周三</div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_113 el-table__cell"
              >
                <div class="cell " >市第十期问题回访:恒茂小区问题未整改，垃圾桶未见分类标识:飞线充电:违规晾晒:公共设施损坏。
                  丰和都会小区问题回访、公共设施损坏问题非常普遍;楼道杂物堆积严重;破损鲜奶箱成污点垃圾广告乱张贴。
                  该问题经多次督办，市暗访也拍了多次，问题匀未整改到位，成老大难问题，</div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_114 el-table__cell"
              >
                <div class="cell " >25</div>
              </td>
            </tr>
            <tr class="el-table__row">
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_110 el-table__cell"
              >
                <div class="cell " >周四</div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_113 el-table__cell"
              >
                <div class="cell " >市第十期问题回访:恒茂小区问题未整改，垃圾桶未见分类标识:飞线充电:违规晾晒:公共设施损坏。
                  丰和都会小区问题回访、公共设施损坏问题非常普遍;楼道杂物堆积严重;破损鲜奶箱成污点垃圾广告乱张贴。
                  该问题经多次督办，市暗访也拍了多次，问题匀未整改到位，成老大难问题，</div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_114 el-table__cell"
              >
                <div class="cell " >24</div>
              </td>
            </tr>
            <tr class="el-table__row">
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_110 el-table__cell"
              >
                <div class="cell " >周五</div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_113 el-table__cell"
              >
                <div class="cell " >市第十期问题回访:恒茂小区问题未整改，垃圾桶未见分类标识:飞线充电:违规晾晒:公共设施损坏。
                  丰和都会小区问题回访、公共设施损坏问题非常普遍;楼道杂物堆积严重;破损鲜奶箱成污点垃圾广告乱张贴。
                  该问题经多次督办，市暗访也拍了多次，问题匀未整改到位，成老大难问题，</div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_114 el-table__cell"
              >
                <div class="cell " >24</div>
              </td>
            </tr> -->
            <!---->
          </tbody>
        </table>
        <!----><!---->
      </div>
      <!----><!----><!----><!---->

    </div>
  </div>
</template>

<script>
import crudUnitInspectorateSituation from '@/api/system/inspectorateSituation';
import { downloadFile } from '@/utils/index';
import CRUD, { presenter, header, crud } from '@crud/crud';
import rrOperation from '@crud/RR.operation';
import crudOperation from '@crud/CRUD.operation';
import { parseTime } from '@/utils/index'
import { download } from '@/api/data'

export default {
  name: 'GeneratorIndex',
  components: { crudOperation, rrOperation },
  mixins: [presenter(), header(), crud()],
  cruds() {
    return CRUD({
      title: '督察情况统计表',
      // url: 'api/tEvent/selectWeeklyEventCount',
      query: { beginDate: '', endDate: '' },
      page: {}
    })
  },
  data() {
    return {
      syncLoading: false,
      list: [],
      downloadLoading: false
    }
  },
  created() {
    this.crud.optShow = {
      add: false,
      edit: false,
      del: false,
      download: false
    }
    this.changeDate()
  },
  methods: {
    parseTime,
    changeDate(v) {
      let val = v || new Date()
      this.query.beginDate = parseTime(+new Date(val.getFullYear(), val.getMonth(), val.getDate() - val.getDay()), '{y}-{m}-{d}')
      this.query.endDate = parseTime(+new Date(val.getFullYear(), val.getMonth(), val.getDate() + (6 - val.getDay())), '{y}-{m}-{d}')
      this.doList()
    },
    doList() {
      crudUnitInspectorateSituation.list(this.query).then((res) => {
        this.list = res
      })
    },
    doExport() {
      const that = this
      const fileName = '安义县总调度室每周督查情况统计表（' + this.query.beginDate.split('-')[1] + '.' + this.query.beginDate.split('-')[2] + '-' + this.query.endDate.split('-')[1] + '.' + this.query.endDate.split('-')[2] + '）'
      this.downloadLoading = true
      download('api/tEvent/downloadWeeklyEventCount', { ...this.query, strFileName: fileName }).then(result => {
        downloadFile(result, fileName, 'xlsx')
        this.downloadLoading = false
      }).catch(() => {
        this.downloadLoading = false
      })
    }
  }
}
</script>

<style scoped>
</style>
